<template>
  <div>
    <div style="width: 430px; float: right">
      <el-input v-model="knowledgeUnit.name" placeholder="请输入知识单元名称" @keyup.enter.native="advanceConfirm">
        <i class="el-input__icon el-icon-search" slot="prefix"></i>
        <el-button :icon="appendIcon" slot="append" v-on:click="switchAppend"></el-button>
      </el-input>
    </div>
    <div id="advance" style="padding: 10px;float: right" v-if="showAdvance">
      <div class="block" style="margin-top: 10px">
        <div style="width: 100px;display: inline-block;text-align: right">图书名称</div>
        <el-input v-model="knowledgeUnit.bookName" size="small" style="width: 300px;"></el-input>
      </div>
      <div class="block" style="margin-top: 10px">
        <div style="width: 100px;display: inline-block;text-align: right">ISBN号</div>
        <el-input v-model="knowledgeUnit.bookIsbn" size="small" style="width: 300px;"></el-input>
      </div>
      <div class="block" style="margin-top: 10px">
        <div style="width: 100px;display: inline-block;text-align: right">类别</div>
        <div style="display: inline-block; ">
          <el-select clearable filterable v-model="knowledgeUnit.category" style="width: 300px; " size="small">
            <el-option v-for="item in $store.state.knowledgeLibList" :key="item.id" :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
        </div>
      </div>
      <div class="block" style="margin-top: 10px">
        <div style="width: 100px;display: inline-block;text-align: right">分类标签</div>
        <el-cascader clearable :options="filteredTagTree" placeholder="请先选择类别"
                     :props="tagCascadeProps" v-model="knowledgeUnit.tagParam"
                     filterable style="width: 300px; "></el-cascader>
      </div>
      <div class="block" style="margin-top: 10px">
        <div style="width: 100px;display: inline-block;text-align: right">自由标签</div>
        <el-input v-model="knowledgeUnit.customTagVo" size="small" style="width: 300px;"></el-input>
      </div>
      <div class="block" style="margin-top: 10px">
        <div style="width: 100px;display: inline-block;text-align: right">入库时间</div>
        <div class="block" style="display: inline-block;">
          <el-date-picker
            v-model="knowledgeUnit.submitMaterialTimeRange"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
            size="small" style="width: 300px;">
          </el-date-picker>
        </div>
      </div>
      <div class="block" style="margin-top: 10px">
        <div style="width: 100px;display: inline-block;text-align: right">隐藏已有任务</div>
        <div class="block" style="display: inline-block;">
          <el-switch v-model="knowledgeUnit.filterExistKnowledgeFlag"></el-switch>
        </div>
      </div>
      <div style="margin-top: 10px; right: 10px;">
        <el-row>
          <el-col :offset="6" :span="6">
            <div style="margin-left: 90px;height: 32px; width: 88px;">
              <el-button size="small" v-on:click="showAdvance = false">取 消</el-button>
            </div>
          </el-col>
          <el-col :offset="2" :span="2">
            <div style="margin-left: 30px;height: 32px; width: 88px;">
              <el-button size="small" v-on:click="initKnowledgeUnit">重置</el-button>
            </div>
          </el-col>
          <el-col :offset="2" :span="2">
            <div div style="margin-left: 30px;height: 32px; width: 88px;">
              <el-button size="small" type="success" v-on:click="advanceConfirm" >确 定</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Search",
    data() {
      return {
        showAdvance: false,
        appendIcon: "el-icon-caret-bottom",
        knowledgeUnit: {},
        knowledgeLibFieldIdList: [],
        tagCascadeProps: {
          label: 'name',
          value: 'id',
          multiple: false,
          checkStrictly: true,
        },
      }
    },
    methods: {
      initKnowledgeUnit(){
        this.knowledgeUnit = {
          name: '',
          bookName: '',
          bookIsbn: '',
          category: '',
          tagParam: '',
          customTagVo: '',
          submitMaterialTimeRange: [],
        }
      },
      switchAppend: function () {
        if (this.showAdvance) {
          this.showAdvance = false;
          this.appendIcon = "el-icon-caret-bottom";
        } else {
          this.showAdvance = true;
          this.appendIcon = "el-icon-caret-top";
        }
      },
      advanceConfirm: function () {
        this.$emit('confirm', this.knowledgeUnit)
        this.showAdvance = false;
      },
    },
    watch: {
      'knowledgeUnit.category'(){
        this.knowledgeUnit.tagParam = []
        this.axios.get('/pmph/action/knowledgeLib/selectTagFieldList', {
          params: {
            knowledgeLibId: this.knowledgeUnit.category,
          }
        }).then(response => {
          this.knowledgeLibFieldIdList = response.data.map(field => field.kindValue)
        })
      }
    },
    computed: {
      filteredTagTree() {
        return this.$store.state.tagTree.filter(topTag => this.knowledgeLibFieldIdList.includes(topTag.id))
      },
    },
    created() {
      this.initKnowledgeUnit()
    }
  }
</script>

<style scoped>
</style>
